#{extends 'main.html' /}
#{set title:'Peungluang Intelligent System' /}

<script>
  
	$(function() {
		$( "#datepicker" ).datepicker({
			showOn: "button",
			buttonImage: "@{'/public/images/icon_set_1_32x32/actions/1day.png'}",
			//buttonImage: "!{'/public/stylesheets/ui-lightness/images/calendar.gif'}",
			buttonImageOnly: true
		});
	});
  
  function toggleImage( icon, data ) {
    $( icon ).toggleClass( "openIcon closeIcon" );
    if ( $( icon ).hasClass('openIcon') ) {
      $( data ).show();
    } else {
      $( data ).hide();
    }
  }
</script>

<div id="trnsactionHeader" class="trnsaction">
  <div id="trnsactionHeaderDisplay"  class="trnsactionDisplay">
    <div id="trnsactionHeaderImage" class="trnsactionImage openIcon" onclick="toggleImage('#trnsactionHeaderImage','#trnsactionHeaderData');">Header</div>
  </div>
  <div id="trnsactionHeaderData">
    <ul id="trnsactionTab" class="trnsactionTab tabs showme" data-tabs="tabs" >
      <li class="active"><a href="#MDTab1">Tab1</a></li>
      <li><a href="#MDTab2">Tab2</a></li>
      <li><a href="#MDTab3">TabN</a></li>
    </ul>

    <div class="pill-content" style="width: 90%">
      <div class="tab-pane active" id="MDTab1">
        <form class="formTransaction">
          <div class="well" >
            <div class="row">
              <div class="well span6" style="height: 100%">
                <fieldset>
                  <!--legend>Example form legend</legend-->
                  <div class="clearfix">
                    <label for="appendedInput">Field1</label>
                    <div class="input">
                      <div class="input-append">
                        <input type="text" size="16" name="appendedInput" id="appendedInput" class="medium">
                        <label class="add-on active">
                          <img src="@{'/public/images/icon_set_1_32x32/actions/search.png'}" >
                        </label>
                      </div>
                    </div>
                  </div><!-- /clearfix -->
                  <div class="clearfix">
                    <label for="xlInput">Field2</label>
                    <div class="input">
                      <input type="text" size="30" name="xlInput" id="xlInput" class="xspan3" style="width: 180px;">
                    </div>
                  </div><!-- /clearfix -->
                  <div class="clearfix">
                    <label for="appendedInput">Field3</label>
                    <div class="input">
                      <div class="input-append" style="z-index: 10;">
                        <input type="text" size="16" name="appendedInput" id="datepicker" class="small">
                        <!--label class="add-on active">
                          <img src="@{'/public/images/icon_set_1_32x32/actions/1day.png'}">
                        </label-->
                      </div>
                    </div>
                  </div><!-- /clearfix -->
                </fieldset>
              </div>
              <div class="well span6" style="height: 100%">
                <fieldset>
                  <!--legend>Example form legend</legend-->
                  <div class="clearfix">
                    <label for="mediumSelect">Field4</label>
                    <div class="input">
                      <select id="mediumSelect" name="mediumSelect" class="medium">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                      </select>
                    </div>
                  </div><!-- /clearfix -->
                  <div class="clearfix">
                    <label id="optionsCheckboxes">Field5</label>
                    <div class="input">
                      <ul class="inputs-list">
                        <li>
                          <label>
                            <input type="checkbox" value="option1" name="optionsCheckboxes">
                            <span>Checkbox</span>
                          </label>
                        </li>
                      </ul>
                      <!--span class="help-block">
                        <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
                      </span-->
                    </div>
                  </div><!-- /clearfix -->
                  <div class="clearfix">
                    <label id="optionsRadio">FieldN</label>
                    <div class="input">
                      <ul class="inputs-list">
                        <li>
                          <label>
                            <input type="radio" value="option1" name="optionsRadios" checked="">
                            <span>Radio1</span>
                          </label>
                        </li>
                        <li>
                          <label>
                            <input type="radio" value="option2" name="optionsRadios">
                            <span>Radio2</span>
                          </label>
                        </li>
                      </ul>
                    </div>
                  </div><!-- /clearfix -->
                </fieldset>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div id="MDTab2" class="tab-pane" >Tab2 . . . </div>
      <div id="MDTab3" class="tab-pane" >Tab3  .  .  .  </div>
    </div>
  </div>
</div>

<div id="trnsactionLine" class="trnsaction" >
  <div id="trnsactionLineDisplay" class="trnsactionDisplay">
    <div id="trnsactionLineImage" class="trnsactionImage 
         openIcon" onclick="toggleImage('#trnsactionLineImage','#trnsactionLineData');">Line</div>
  </div>
  <div id="trnsactionLineData">
    <ul id="trnsactionTab" class="trnsactionTab tabs showme" data-tabs="tabs" >
      <li class="active"><a href="#MDTab1">Tab1</a></li>
      <li><a href="#MDTab2">Tab2</a></li>
      <li><a href="#MDTab3">TabN</a></li>
    </ul>

    <div class="pill-content" style="width: 90%" >
      <div class="tab-pane active" id="MDTab1">
        <div class="trnsactionDisplay">Column Name</div>
        <div class="columnbox">Line  1
          <div class="msgbar-img-right">
            <img src="@{'/public/images/icon_set_1_32x32/actions/signature.png'}" >
            <img src="@{'/public/images/icon_set_1_32x32/actions/edit_remove.png'}" >
          </div>
        </div>
        <div class="columnbox">Line .
          <div class="msgbar-img-right">
            <img src="@{'/public/images/icon_set_1_32x32/actions/signature.png'}" >
            <img src="@{'/public/images/icon_set_1_32x32/actions/edit_remove.png'}" >
          </div>
        </div>
        <div class="columnbox">Line 10
          <div class="msgbar-img-right">
            <img src="@{'/public/images/icon_set_1_32x32/actions/signature.png'}" >
            <img src="@{'/public/images/icon_set_1_32x32/actions/edit_remove.png'}" >
          </div>
        </div>
        <img src="@{'/public/images/icon_set_1_32x32/actions/edit_add.png'}" class="iconAdd">
        <br />
      </div>
      <div id="MDTab2" class="tab-pane" >Tab2 . . . </div>
      <div id="MDTab3" class="tab-pane" >Tab3  .  .  .  </div>
    </div>
  </div>
</div>

<div id="trnsactionDelivery" class="trnsaction">
  <div id="trnsactionDeliveryDisplay" class="trnsactionDisplay">
    <div id="trnsactionDeliveryImage" class="trnsactionImage openIcon" 
         onclick="toggleImage('#trnsactionDeliveryImage','#trnsactionDeliveryData');">Delivery</div>
  </div>
  <div id="trnsactionDeliveryData">
    <ul id="trnsactionTab" class="trnsactionTab tabs showme" data-tabs="tabs" >
      <li class="active"><a href="#MDTab1">Tab1</a></li>
      <li><a href="#MDTab2">Tab2</a></li>
      <li><a href="#MDTab3">TabN</a></li>
    </ul>

    <div class="pill-content" style="width: 90%" >
      <div class="tab-pane active" id="MDTab1">
        <div class="trnsactionDisplay">Column Name</div>
        <div class="columnbox">Delivery  1
          <div class="msgbar-img-right">
            <img src="@{'/public/images/icon_set_1_32x32/actions/signature.png'}" >
            <img src="@{'/public/images/icon_set_1_32x32/actions/edit_remove.png'}" >
          </div>
        </div>
        <div class="columnbox">Delivery .
          <div class="msgbar-img-right">
            <img src="@{'/public/images/icon_set_1_32x32/actions/signature.png'}" >
            <img src="@{'/public/images/icon_set_1_32x32/actions/edit_remove.png'}" >
          </div>
        </div>
        <div class="columnbox">Delivery 10
          <div class="msgbar-img-right">
            <img src="@{'/public/images/icon_set_1_32x32/actions/signature.png'}" >
            <img src="@{'/public/images/icon_set_1_32x32/actions/edit_remove.png'}" >
          </div>
        </div>
        <img src="@{'/public/images/icon_set_1_32x32/actions/edit_add.png'}" class="iconAdd">
        <br />
      </div>
      <div id="MDTab2" class="tab-pane" >Tab2 . . . </div>
      <div id="MDTab3" class="tab-pane" >Tab3  .  .  .  </div>
    </div>
  </div>
</div>
